<template>
    <div class="inputAddress">
        <div class="cell">
            <input type="text" name="" @input="getCity" id="">
            <!-- <input type="text" @input="getCity" class="address" placeholder="请输入地址"> -->
        </div>
        <div class="cell cellRight">
            <label class="clearLabel">清空当前信息</label>
        </div>
        <div class="poiList">
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>

            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
            <div class="item">
                <div class="itemInfo">北京市</div>
                <div class="citys">北京市，北京市，朝阳区</div>
            </div>
        </div>
        <div class="footer">
            <div class="btn-wrap">
               <div class="btn-left"
               @click="cancelOrder">
                  <span>取消</span>
               </div>
               <div class="btn-right" 
               @click="confirmOrder">
                  <span>确认</span>
               </div>
            </div>
         </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default{
        mounted() {
        },
        methods:{
            getCity(e){
                this.innerValue = e.target.value;
                axios.get(
                    `https://restapi.amap.com/v3/place/text?keywords=${this.innerValue}&city=北京&key=35c3f70ed9033ee76478a442576bf02b&extensions=all`
                    // 'https://restapi.amap.com/v3/place/text?keywords="' +
                    //   this.innerValue +
                    //   '"&city="+''+"&key='+this.mapKey[index]+'&extensions=all'
                    ).then(res=>{
                        console.log(res);
                    });
            }
        }
    };
</script>
<style lang="scss">
    .inputAddress {
        width: 100%;
        height: 100%;
        background: #f8f8f8;
    }
    .cell{
        background: #fff;
        padding: 15px;
        font-size: 14px;
        border-top: 1px solid #e5e5e5;
    }
    .cell input{
        border: 0;
        font-size: 15px;
        background: none;

    }
    .cellRight{
        text-align: right;
    }
    .clearLabel{
        color: #F18D00;
    }
    .poiList{
        background: #fff;
        margin-top: 10px;
        height: 500px;
        overflow: scroll;
    }
    .item{
        padding: 10px 15px;
        font-size: 14px;
        color: #333;
    }
    .citys{
        color:#999;
        font-size: 12px;
    }
    .footer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
        text-align: center;
        .btn-wrap {
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .btn-left {
            background: #fff;
            border: 1px solid #f18d00;
            border-radius: 2px;
            color: #f18d00;
            font-size: 18px;
            width: 47%;
            height: 44px;
            line-height: 44px;
            box-sizing: border-box;
            }
            .btn-right {
            width: 47%;
            height: 44px;
            line-height: 44px;
            font-size: 18px;
            background: #f18d00;
            border: 1px solid #f18d00;
            box-sizing: border-box;
            border-radius: 2px;
            color: #fff;
            }
            .btn-error {
            width: 47%;
            height: 44px;
            line-height: 44px;
            font-size: 18px;
            background: #ff6540;
            border: 1px solid #ff6540;
            box-sizing: border-box;
            border-radius: 2px;
            color: #fff;
            }
        }
        }
</style>